<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试外部消息发送</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .container {
        background: white;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      button {
        background: #007bff;
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px 5px;
        font-size: 14px;
      }
      button:hover {
        background: #0056b3;
      }
      .result {
        margin-top: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 5px;
        border-left: 4px solid #007bff;
      }
      input {
        width: 100%;
        padding: 8px;
        margin: 5px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      label {
        display: block;
        margin: 10px 0 5px 0;
        font-weight: bold;
      }
      .status {
        padding: 10px;
        margin: 10px 0;
        border-radius: 5px;
        font-weight: bold;
      }
      .status.ready {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }
      .status.waiting {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>测试文章发布器插件消息</h1>
      <p>这个页面用于测试向您的文章发布器插件发送消息。</p>

      <div id="status" class="status waiting">等待插件加载...</div>

      <label for="traceId">追踪ID:</label>
      <input type="text" id="traceId" placeholder="输入追踪ID" value="test-123" />

      <div style="margin: 20px 0">
        <button onclick="sendMessage()">发送测试消息</button>
        <button onclick="sendCustomMessage()">要求插件发布文章</button>
      </div>

      <div id="result" class="result" style="display: none">
        <h3>响应结果:</h3>
        <pre id="responseText"></pre>
      </div>
    </div>

    <script>
      let pluginReady = false

      // 生成随机追踪ID
      function generateTraceId() {
        return 'trace-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9)
      }

      // 页面加载时生成默认追踪ID
      document.getElementById('traceId').value = generateTraceId()

      // 监听来自插件的消息
      window.addEventListener('message', (event) => {
        console.log('页面收到消息:', event.data)

        const message = event.data

        // 检查插件是否准备就绪
        if (message.type === 'contentScriptReady') {
          pluginReady = true
          updateStatus('插件已准备就绪', 'ready')
          console.log('插件已准备就绪')
        }

        // 处理响应消息
        if (message.type === 'response') {
          console.log('收到插件响应:', message)
          showResult(message)
        }
      })

      function updateStatus(text, className) {
        const statusDiv = document.getElementById('status')
        statusDiv.textContent = text
        statusDiv.className = `status ${className}`
      }

      // 发送消息
      function sendMessage() {
        if (!pluginReady) {
          alert('插件尚未准备就绪，请稍后再试')
          return
        }

        const traceId = document.getElementById('traceId').value

        const message = {
          type: 'request',
          traceId: traceId,
          action: '测试',
          data: "",
        }

        console.log('发送消息:', message)

        // 使用postMessage发送消息
        window.postMessage(message, '*')

        updateStatus('消息已发送，等待响应...', 'waiting')
      }

      // 发送自定义消息
      function sendCustomMessage() {
        if (!pluginReady) {
          alert('插件尚未准备就绪，请稍后再试')
          return
        }

        const traceId = document.getElementById('traceId').value

        const today = new Date()
        const todayString = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
        const weekDays = ['日', '一', '二', '三', '四', '五', '六']
        const weekString = `星期${weekDays[today.getDay()]}`

        const sendData = {
          // 标题
          title: '法律资讯日报',
          // 作者
          author: '陈恒',
          // 描述
          description: `${todayString} ${weekString} 法律资讯日报`,
          // 封面图
          coverPath: ['D:/workplace/250111 - 自动化发布每日资讯项目/src/assets/每日资讯首图.png'],
          // 正文
          htmlPath: null,
          // 音频
          audioPath: null,
          // 合集
          tagList: ['文-法律与AI', '日报'],
          // 预览
          previewName: 'lawyerCH13246893718',
          // 是否原创
          isOriginal: false,
          // 是否赞赏
          isReward: false,
        }

        const message = {
          type: 'request',
          traceId: traceId,
          action: '发布文章',
          data: {
            sendData,
          },
        }

        console.log('发送自定义消息:', message)

        // 使用postMessage发送消息
        window.postMessage(message, '*')

        updateStatus('自定义消息已发送，等待响应...', 'waiting')
      }

      function showResult(response) {
        const resultDiv = document.getElementById('result')
        const responseText = document.getElementById('responseText')

        responseText.textContent = JSON.stringify(response, null, 2)
        resultDiv.style.display = 'block'

        updateStatus('收到响应', 'ready')
      }

      // 页面加载后等待插件
      setTimeout(() => {
        if (!pluginReady) {
          updateStatus('插件未检测到，请确保插件已安装并刷新页面', 'waiting')
        }
      }, 3000)
    </script>
  </body>
</html>
